<template>
  <div class="map-view">
    <div class="btn-left">
      <h3>光谷智慧交通</h3>
      <RealTime />
      <VideoSurvei />
      <EventAddition />
      <EventReview />
      <EventUpdate />
      <AnnounceView />
      <FrafficInform />
      <WorkBox />
      <UserControl />
    </div>
    <div class="btn-right">
      <input type="text" placeholder="输入交通事件查询" v-model="searchText" />
      <button>查询</button>
      <div class="map-name">usermap</div>
    </div>
  </div>
  <div id="map"></div>
</template>

<script setup>
import { ref, onMounted, provide } from 'vue'
import { gaode, image } from '../../ol-api/layers'
import RealTime from '../components/RealTime.vue'
import VideoSurvei from '../components/VideoSurvei.vue'
import EventAddition from '../components/EventAddition.vue'
import EventReview from '../components/EventReview.vue'
import EventUpdate from '../components/EventUpdate.vue'
import AnnounceView from '../components/AnnounceView.vue'
import FrafficInform from '../components/FrafficInform.vue'
import WorkBox from '../components/WorkBox.vue'
import UserControl from '../components/UserControl.vue'

const map = ref(null)
const docLayer = ref(null)

onMounted(() => {
  // const gaodeMap = new ol.layer.Tile({ // 高德地图瓦片图层
  //         source: new ol.source.XYZ({ // XYZ瓦片数据源
  //             url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", // 高德地图URL模板
  //             wrapX: false // 水平方向不重复
  //         })
  //     })
  map.value = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 12,
      projection: 'EPSG:4326',
    }),
    layers: [image, gaode],
  })

  // 在OL的地图基础上加载MAPGIS发布的地图文档
  docLayer.value = new Zondy.Map.Doc('', 'guanggu', {
    ip: 'localhost',
    port: '6163',
  })
  map.value.addLayer(docLayer.value)
})

provide('mapScene', {
  map: map.value,
  docLayer: docLayer.value,
})
</script>

<style lang="scss" scoped>
.map-view {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 40px;
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;

  align-items: center;
  .btn-left {
    display: flex;
    // 沿着y轴方向排列
    flex-direction: wrap;
    align-items: center;
    margin-left: 10px;
    gap: 15px;
    h3 {
      margin: 10px 0;
    }
  }
  .btn-right {
    display: flex;
    align-items: center;
    margin-right: 10px;
    input {
      width: 200px;
      height: 30px;
      padding: 5px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin-right: 10px;
    }
    button {
      width: 60px;
      height: 30px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .map-name {
      font-size: 14px;
      font-weight: 300;
      padding: 10px;
    }
  }
}
#map {
  width: 100vw;
  height: 100vh;
}
</style>
